<template>
  <div class="wrap">
      <div class="header">
          <img src="/icon/back.png" alt="" class="back" width="14px" @click="back">
          <div class="topTitle">职位详情</div>
          <div class="attention">收藏+</div>
      </div>
      <div class="content">
          <div class="bg"></div>
          <div class="introduce">

              <div class="left" style="margin-right: 20px;">
                  <img :src="company.logoUrl" alt="" width="90px" style="border-radius: 50%;">
              </div>
              <div class="text">
                  <h3 class="title">{{company.title}}</h3>
                  <div class="tips">{{company.companyRange}}|{{company.companyNumber}}|互联网</div>
                  <span :class="{ 'line-clamp-3': !isExpand }">{{company.description}}</span>
                  <p  @click="toggleExpand" style="font-size:11px;color:#149639; margin-top: 5px">...{{ isExpand ? '收起' : '查看更多' }}</p>
              </div>
              
          </div>
          <div class="workTime">
            <span class="timeTitle">工作时间</span><br><br>
            <span v-for="item in company.workTime" :key="item">{{item}}</span>
          </div>
          <div class="welfare">
            <span class="welfareTitle">员工福利</span>
            <div class="welfareContent">
              <div class="item" v-for="item in company.welfare" :id="item.title">
                <div class="img">
                  <img :src="item.img" alt="">
                </div>
                <div class="info">
                  <div class="title">{{item.title}}</div>
                  <div class="detail">
                    {{item.descp}}
                  </div>
                </div>
              </div>
              
            </div>
            
          </div>
          <div class="companySite">
                <div class="siteTitle">
                  公司官网
                </div>
                <span class="text">
                  {{ company.siteUrl ? company.siteUrl.substr(0,20):'暂无' }}...

                </span>
              </div>
      </div>
  </div>
</template>

<script setup>
import {useRouter} from "vue-router";
import {onMounted, reactive, ref} from "vue";
import {getCompanyDetail} from "../../api/home.js";

const router = useRouter()
const companyid = router.currentRoute.value.params.id
const company = reactive({})
onMounted(async ()=>{
    const res = await getCompanyDetail({companyid})
    Object.assign(company, res.data)
    console.log(res)
})
const back = ()=>{
  console.log(back);
  
    router.push({
        path:router.currentRoute.value.query.redirect
    })
}
// 控制展开/收起的状态
const isExpand = ref(false)

// 切换展开/收起逻辑
const toggleExpand = () => {
    isExpand.value = !isExpand.value
}
</script>

<style scoped lang="less">
  .wrap{
      width: 100%;
      height: 100%;
      position: relative;
      background-color: #fff;
      z-index: 9999;

      box-sizing: border-box;
      .header{
          z-index: 999999;
          position: absolute;
          top: 0;
          left:0;
          width: 100%;
          height: 78px;
          background-color: #139639;
          padding: 40px 15px 15px;
          display: flex;
          color:#fff;
          align-items: center;
          .topTitle{
              font-size: 18px;
              margin: 0px 10px;
          }
          .attention{
              width: 60px;
              height: 24px;
              border-radius:12px;
              line-height: 24px;
              text-align: center;
              border:1px solid #fff;
          }
      }
      .content {
        height: calc(100% - 78px);
        width: 100%;
        position: relative;
        overflow-y: auto;

          padding: 78px 13px 0px;
          .bg {
              top: 78px;
              left: 0;
              position: absolute;
              width: 100%;
              max-width: 750px;
              height: 37px;
              background-color: #149639;
              z-index: -1;
          }

        .introduce {
            width: 100%;
          display: flex;
          .left{
            width: 100px;
            img{
              width: 90px;
            }
          }


          .text {
            color:#000;
            .title{
              height: 20px;
              font-size: 20px;
              color: #fff;
              margin-bottom: 29px;
            }
            .tips {
              font-size: 11px;
              margin-bottom: 9px;
            }
              span{
                  font-size: 11px;
                  color:#888;
              }

            span.line-clamp-3 {
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3; /* 仅展示 3 行，可根据需求调整 */
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
          .workTime{
              margin-top: 5px;
              padding-bottom: 20px;
              span.timeTitle{
                font-size: 16px;
                color:#000;
              }
              span{
                margin-right: 10px;
                color:#777;
                font-size: 11px;
              }

          }
          .welfare{
            margin-top: 20px;
            .welfareTitle{
              font-size: 16px;
              color:#000;
            }
            .welfareContent{
              font-size: 14px;
              padding: 0px 15px 20px;
              margin-top: 25px;
              .item{
                margin-top: 21px;
                display: flex;
                .img{
                  margin-right: 20px;
                }
                .info{
                .title{
                  font-size: 14px;
                  margin-bottom: 10px;
                }
                .detail{
                  font-size: 11px;
                  color:#888;
                  line-height: 1.2;
                }
              }
              }
              
              
            }
          }
          .companySite{
                margin-top: 20px;
                .siteTitle{
                  font-size: 16px;
                  margin-bottom: 20px;
                }
                .text{
                  font-size: 14px;
                  color:#888;
                }
              }
      }
  }
</style>